<template>
  <div>
    <el-button-group>
      <el-button @click="handelAdd()">新增</el-button>
    </el-button-group>

    <el-table
      :data="list"
      border
      style="width: 100%">
      <el-table-column prop="label" label="标签" />
      <el-table-column prop="value" label="值" />
      <el-table-column prop="uiComponent" label="ui组件" />
      <el-table-column prop="importUrl" label="引入路径" />
      <el-table-column prop="sort" label="排序" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            修改
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div>
      <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form ref="dataForm" :model="temp" :rules="rules" size="medium" label-width="106px"
                 label-position="left">
          <el-form-item label="字段标签" prop="label">
            <el-input v-model="temp.label" placeholder="请输入字段标签" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="值" prop="value">
            <el-input v-model="temp.value" placeholder="请输入值" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="ui组件" prop="uiComponent">
            <el-input v-model="temp.uiComponent" placeholder="请输入ui组件" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="引入路径" prop="importUrl">
            <el-input v-model="temp.importUrl" placeholder="请输入引入路径" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
          <el-form-item label="字段排序" prop="sort">
            <el-input v-model="temp.sort" placeholder="请输入字段排序" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handelConfirm()">确定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="删除"
        :visible.sync="dialogDelVisble"
        width="30%">
        <span>是否删除该条数据?</span>
        <span slot="footer" class="dialog-footer">
                <el-button @click="dialogDelVisble = false">取 消</el-button>
                <el-button type="primary" @click="handleDeleteConfirm">删除</el-button>
            </span>
      </el-dialog>
    </div>

  </div>

</template>

<script>
  import formComponentApi from "@/api/gen/config/formComponent.js";
  export default {
    data() {
      return {
        list: [],
        temp: {
        },
        rules: {
          label: [{
            required: true,
            message: '请输入字段标签',
            trigger: 'blur'
          }],
          value: [{
            required: true,
            message: '请输入值',
            trigger: 'blur'
          }],
          sort: [{
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }],
          importUrl: [],
          uiComponent: [],
        },
        dialogStatus: '',
        dialogFormVisible: false,
        dialogDelVisble: false,
        textMap: {
          create: "新增",
          update: '修改',
        },
        databaseTypeOptions: [{
          "label": "MYSQL",
          "className": 1
        }],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      findDatabaseNameByType(type){
        for (let i = 0; i <this.databaseTypeOptions.length ; i++) {
          if (this.databaseTypeOptions[i].className===type){
            return this.databaseTypeOptions[i].label;
          }
        }
      },
      getList() {
        formComponentApi.findAll().then(res => {
          console.log(res);
          this.list = res.data;
        })
      },
      handelAdd() {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      resetTemp() {
        this.temp = {};
      },
      handelConfirm() {
        this.$refs['dataForm'].validate(valid => {
          if (valid) {
            formComponentApi.saveOne(this.temp).then(() => {
              this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: 'Success',
                message: '新增数据成功',
                type: 'success',
                duration: 2000
              });
              this.getList();
            })
          }
        });

      },
      handleUpdate(row) {
        this.temp = Object.assign({}, row);
        this.dialogStatus = 'update';
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      handleDelete(row, index) {
        this.temp = Object.assign({}, row);
        this.temp.index = index;
        this.dialogDelVisble = true
      },
      handleDeleteConfirm() {
        const tempData = Object.assign({}, this.temp);
        this.dialogDelVisble = false;
        formComponentApi.deleteOne(tempData.id).then(() => {
          this.list.splice(tempData.index, 1);
          this.$notify({
            title: '成功',
            message: '删除数据成功!',
            type: 'success',
            duration: 2000
          })
        })
      },
    }
  }
</script>

<style scoped>

</style>
